<template>
  <div class="List">
    <van-nav-bar title="护肤榜" left-text="">
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="#000000"
          @click="backhome"
        />
      </template>
      <template #right>
        <van-icon name="search" size="18" color="#000000" @click="gotosearch" />
      </template>
    </van-nav-bar>
    <div class="wrapper">
      <!-- 导航部分嵌套路由 -->
      <div class="classify-list">
        <router-link
          tag="li"
          v-for="item in navList"
          :key="item.url"
          :to="item.url"
        >
          {{ item.title }}
        </router-link>
        <ul>
          <li>综合</li>
          <li>热度</li>
          <li>评分</li>
          <li>价格</li>
        </ul>
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          title: "上升榜",
          url: "/mplist/upd",
        },
        {
          title: "洁面",
          url: "/mplist/skincare",
        },
        {
          title: "护肤水",
          url: "/mplist/makeup",
        },
        {
          title: "精华",
          url: "/mplist/foundation",
        },
      ],
    };
  },
  methods: {
    backhome() {
      this.$router.push("/home/index");
    },
    gotosearch() {
      this.$router.push("/searchb");
    },
  },
};
</script>

<style lang="less" scoped>
.List {
  background-color: white;
  .van-nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99;
    left: 0;
    background-color: white;
  }
  .wrapper {
    width: 100%;
    position: relative;
    top: 46px;

    .classify-list {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      position: fixed;
      background-color: white;
      z-index: 99;
      flex: 1;
      a {
        width: 25%;
        text-align: center;
        height: 40px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #999999;
        line-height: 40px;
        display: inline-block;
      }
      .router-link-active {
        color: #64c8c8;
      }
      ul {
        display: flex;
        height: 40px;
        border-bottom: 1px solid #f1f1f1;
        li {
          width: 50px;
          height: 14px;
          font-size: 12.5px;
          font-family: PingFang;
          font-weight: bold;
          color: #999999;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
}
</style>
